<template>
    <context-holder />
    <a-alert style="color: #606266" message="在这里测试您摄像头设备是否正常" type="info" />
    <div class="container">
        <video ref="testVideo" poster="../../assets/emptyVideo.png" class="video"></video>
        <div class="device-list">
            <h4>音频输入：</h4>
            <p v-for="item in devicesList.a_i" :key="item.deviceId">
                {{ item.label }}
            </p>
            <a-divider></a-divider>
            <h4>音频输出：</h4>
            <p v-for="item in devicesList.a_o" :key="item.deviceId">
                {{ item.label }}
            </p>
            <a-divider></a-divider>
            <h4>视频输入：</h4>
            <p v-for="item in devicesList.v_i" :key="item.deviceId">
                {{ item.label }}
            </p>
        </div>
    </div>
    <div class="oprs">
        <a-button @click="getDevices">获取媒体设备信息</a-button>
        <a-button @click="getVideo">开启视频</a-button>
        <a-button @click="stopVideo">关闭视频</a-button>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { useSocketStore } from "../../stores/imsocket";
import { useRouter } from "vue-router";
import _ from "lodash";

const DEFAULT_DEVICES = {
    a_i: [],
    a_o: [],
    v_i: []
};

const [messageApi, contextHolder] = message.useMessage();
const socketStore = useSocketStore();
const testVideo = ref();
const openVideo = ref(false);
const devicesList = ref<any>(_.cloneDeep(DEFAULT_DEVICES));
const router = useRouter();

onMounted(() => {
    // let username = window.localStorage.getItem("user");
    // let userid = window.localStorage.getItem("userid");
    // if (username && userid) {
    //     socketStore.setUser(username, userid);
    // } else {
    //     router.push("/login");
    // }
    console.log(document.body.clientWidth);
});

// 获取媒体信息
const getDevices = () => {
    devicesList.value = _.cloneDeep(DEFAULT_DEVICES);
    const constrationlist = navigator.mediaDevices.getSupportedConstraints();
    console.log(constrationlist);
    navigator.mediaDevices.enumerateDevices().then((devices) => {
        console.log(devices);
        devices.forEach((item) => {
            switch (item.kind) {
                case "audioinput":
                    devicesList.value.a_i.push(item);
                    break;
                case "audiooutput":
                    devicesList.value.a_o.push(item);
                    break;
                case "videoinput":
                    devicesList.value.v_i.push(item);
                    break;
            }
        });
    });
};
// 开启摄像头
const getVideo = (audioId: string, videoId: string) => {
    let videoWidth = socketStore.isPhone ? document.body.clientWidth - 96 : 636;
    navigator.mediaDevices
        .getUserMedia({ audio: { deviceId: audioId }, video: { deviceId: videoId, width: videoWidth, height: 337 } })
        .then((steam) => {
            testVideo.value.srcObject = steam;
            testVideo.value.onloadedmetadata = function () {
                testVideo.value.play();
                openVideo.value = true;
            };
        })
        .catch((err) => {
            console.log(err);
            messageApi.error("视频请求被拒绝，请允许浏览器访问摄像头和麦克风");
        });
};
const stopVideo = () => {
    const tracks = testVideo.value.srcObject.getVideoTracks();
    tracks.forEach((track: any) => {
        track.stop();
    });
    testVideo.value.srcObject = null;
    openVideo.value = false;
};
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
}
.video {
    position: relative;
    width: 600px;
    height: 337px;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 24px;
    background-color: #f3f6f9;
}
.device-list {
    width: 500px;
    border: 1px solid #909399;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 24px;
}
.oprs {
    .ant-btn {
        margin-right: 12px;
        margin-bottom: 6px;
    }
}
@media (max-width: 1000px) {
    .video {
        width: 100%;
    }
    .device-list {
        width: 100%;
    }
}
</style>
